<template>
  <div class="mother-page">
    <Mother />
    <div class="mother-banner">
      <div class="banner-img">
        <img
          src="https://img.alicdn.com/imgextra/i2/2053469401/O1CN01sslbGT2JJi0dfj6Qy_!!2053469401.png"
          alt=""
        />
      </div>
      <div class="mother-wrapper">
        <div class="wrapper-nav">
          <van-tabs v-model:active="active" @click="onPush" animated>
            <van-tab
              v-for="item in list"
              :title="item.cateName"
              :key="item.id"
              :name="item.id"
            >
              <Banner />
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, toRefs } from "vue";
import { useStore } from "vuex";
import Mother from "../../components/Mother/index.vue";
import Banner from "../../components/Mother/Banner.vue";
export default defineComponent({
  components: {
    Mother,
    Banner,
  },
  setup() {
    const store = useStore();
    const list = computed(() => store.state.mother.list);
    onMounted(() => {
      onPush(27);
      store.dispatch({
        type: "mother/getMotherList",
      });
    });
    const onPush = (categoryId: number) => {
      store.dispatch({
        type: "mother/getMotherCate",
        categoryId,
      });
    };
    return {
      list,
      onPush,
    };
  },
});
</script>
<style lang="stylus" scoped>
html, body, .mother-page {
  height: 100%;
  width: 100%;
}

* {
  padding: 0;
  margin: 0;
}

.mother-banner {
  color: #333;
  display: block;
  min-height: calc(100vh - 0.9rem);
  background: url('https://cmsstatic.ffquan.cn/dist/static/header_bg.747dcea0.png') 0rem / 100% no-repeat;
  margin-top: 0px;
  background-position: top;
  padding-top: 0.44rem;
  background-size: 100% 3.15rem;

  .banner-img {
    border-radius: 0.12rem;
    width: 90%;
    height: 90%;
    margin: 0.1rem auto 0;

    img {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 0.12rem;
    }
  }
}

.mother-wrapper {
  margin-top: 0.08rem;

  /deep/.van-tabs__nav {
    background: rgba(0, 0, 0, 0);
    color: #fff;

    .van-tab {
      color: hsla(0, 0%, 100%, 0.6);
    }

    .van-tab--active {
      color: #fff;
    }

    .van-tab {
      padding: 0;
    }

    .van-tab__text {
      font-size: 0.16rem;
    }

    .van-tabs__line {
      background: #fff;
    }
  }
}
</style>
